<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />

    <!-- <script src="./js/cmt.js"></script> -->
</head>

<body style="padding: 15px;">
    <<<<<<< HEAD <h1>山东曹县 牛逼666 我的宝贝</h1>
        <!-- 评论面板 -->
        =======

        <!-- 评论面板 -->
        <h1>好困阿啊啊啊啊啊</h1>
        >>>>>>> 2833fe7e2a2347892cc06579d3c7199c619940c0
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">发表评论</h3>
            </div>
            <form class="panel-body" id="formAddCmt">
                <div>评论人：</div>
                <input type="text" class="form-control" name="username" autocomplete="off" />
                <div>评论内容：</div>
                <textarea class="form-control" name="content"></textarea>

                <button type="submit" class="btn btn-primary">发表评论</button>
            </form>
        </div>

        <h1>山东曹县 牛逼666 我的宝贝</h1>


        <!-- 评论列表 -->
        <ul class="list-group" id="cmt-list"></ul>
        <script src="./lib/jquery.js"></script>
        <script>
            function list1() {
                $.ajax({
                    url: "http://www.liulongbin.top:3006/api/cmtlist",
                    type: "get",
                    success: function (res) {
                        // 
                        if (res.status == 200) {
                            $("#cmt-list").html("");
                            $.each(res.data, function (index, item) {
                                let li = $(`<li class="list-group-item">
                          <span class="badge" style="background-color: #F0AD4E;">评论时间：${item.time}</span>
                          <span class="badge" style="background-color: #5BC0DE;">评论人：${item.username}</span>
                          ${item.content}
                        </li>`);

                                $("#cmt-list").append(li);
                            })
                        }
                    }
                })
            }
            list1();


            // 新增
            $("form").on("submit", function (e) {
                e.preventDefault();

                // 1.收集数据
                let data = $(this).serialize();


                // 2提交数据
                $.ajax({
                    url: "http://www.liulongbin.top:3006/api/addcmt",
                    type: "POST",
                    data: data,
                    success: function (res) {
                        // console.log(res);
                        list();

                        // 表单元素置空：原生form节点.reset(); 重置；
                        $("form").get(0).reset();
                    }
                })




            });
        </script>
</body>

</html>